<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据双向绑定</title>
		
	</head>
	<body>
		<div id="app">
			<h1>v-model 数据双向绑定展现</h1>
			<input type="text" v-model="msg"/>
			<hr >
			<h1>v-model的原理说明</h1>
			<h3>inputText函数定义时如果有参数,但是调用时没有传递参数,则会将event对象进行传递</h3>
			<input type="text" v-bind:value="msg" @input="inputText"/>
			<!-- 写法2  -->
			<input type="text" v-bind:value="msg" @input="msg = $event.target.value"/>
			<hr >
			
			<h3>radio 单选按钮数据绑定</h3>
			<h3>选中性别: {{sex}}</h3>
			<!-- 当使用单选框时 name属性相同时 才会互斥.  当使用v-model时 表示事件绑定如果标识同一个属性,则也可以互斥 -->
			<label for="male">
				<input  type="radio" value="男" v-model="sex" id="male"> 男
			</label>
			<br>
			<label for="female">
				<input  type="radio" value="女" v-model="sex" id="female"> 女
			</label>	
			
			<hr >
			
			<h1>复选框操作</h1>
			<h2>是否选中:{{isAgree}}</h2>
			<label>
				<input type="checkbox" name="agree" v-model="isAgree"/>同意协议
			</label>
			
			<br>
			 <h3>动态获取复选框数据 {{hobby}}</h3> 
			
			爱好:
			<label>
				<input type="checkbox" v-model="hobby" id="hobby" value="篮球" /> 篮球
			</label>
			<label>
				<input type="checkbox" v-model="hobby" id="hobby" value="足球" /> 足球
			</label>
			<label>
				<input type="checkbox" v-model="hobby" id="hobby" value="排球" /> 排球
			</label>
			<label>
				<input type="checkbox" v-model="hobby" id="hobby" value="羽毛球" /> 羽毛球
			</label>
			
			<hr >
			<h2>下拉框操作</h2>
			<h3>您所选中的数据:{{book}}</h3>
			<select name="book" v-model="book">
				<option value="java编程思想">java编程思想</option>
				<option value="java讲义">java讲义</option>
				<option value="java从入门到放弃">java从入门到放弃</option>
			</select>
			
			<h2>下拉框多选操作</h2>
			<h3>您所选中的数据:{{books}}</h3>
			<select name="books" multiple="multiple"  v-model="books">
				<option value="安徒生童话">安徒生童话</option>
				<option value="格林童话">格林童话</option>
				<option value="卖火柴的小女孩">卖火柴的小女孩</option>
			</select>
			
			
			<h2>值绑定操作</h2>
			<p>有些数据需要通过后端服务器获取才能知道具体的属性值所以需要使用值绑定</p>
			选中用户:{{checkUsers}} <br>
			<label v-for="user in users"  :for="user">
				<input type="checkbox" :value="user" :id="user" :name="user" v-model="checkUsers"/>{{user}}
			</label>
		</div>	
		
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				
				el : "#app",
				data : {
					msg : "指定数据双向绑定",
					sex : "男",
					isAgree : false,
					hobby	: [],
					book	: "java从入门到放弃",
					books	: ["格林童话"],
					users	: ["小明","韩梅梅","李雷"],
					checkUsers : []
				},
				methods:{
					//需要将当前元素的数据获取之后为属性赋值
					inputText(event){
						this.msg = event.target.value;
					}
				}
			}) 
		</script>
	</body>
</html>
